<script lang="ts" setup>
import LanguageSelector from '@/components/common/LanguageSelector.vue'
import { useUserStore } from '@/store'
import { tabbarList } from '@/tabbar/config'
import { ensureDecodeURIComponent } from '@/utils'
import AccountLogin from './components/AccountLogin.vue'
import PhoneLogin from './components/PhoneLogin.vue'
import ThirdPartyLogin from './components/ThirdPartyLogin.vue'
import WechatLogin from './components/WechatLogin.vue'
import { LoginType } from './composable/useLogin'

definePage({
  style: {
    navigationStyle: 'custom',
  },
})

const redirectUrl = ref('')

onLoad((options) => {
  console.log('login options: ', options)
  if (options.redirect) {
    redirectUrl.value = ensureDecodeURIComponent(options.redirect)
  }
  else {
    redirectUrl.value = tabbarList[0].pagePath
  }
  console.log('redirectUrl.value: ', redirectUrl.value)
})

// 登录方式切换
const loginType = ref<LoginType>(LoginType.WECHAT)

// 用户协议状态
const agreeTerms = ref(false)

function onBack() {
  uni.navigateBack()
}
</script>

<template>
  <sar-navbar :title="$t('login.title')" show-back :back-text="$t('login.back')" fixed :status-bar="true" @back="onBack">
    <template #right>
      <LanguageSelector />
    </template>
  </sar-navbar>
  <view class="min-h-screen flex flex-col from-blue-50 to-indigo-100 bg-gradient-to-br">
    <!-- 头部Logo区域 -->
    <view class="flex flex-1 flex-col items-center justify-center px-8 pb-8 pt-3">
      <view class="mb-8 h-24 w-24 flex items-center justify-center rounded-full">
        <SarAvatar :src="useUserStore().userInfo?.avatar || '../../static/images/default-avatar.png'" size="96rpx" />
      </view>
      <text class="mb-2 text-2xl text-gray-800 font-bold">{{ $t('login.title') }}</text>
      <text class="text-sm text-gray-500">{{ $t('login.subtitle') }}</text>
    </view>

    <!-- 登录表单区域 -->
    <view class="flex-1 rounded-t-3xl bg-white px-8 py-8">
      <!-- 登录方式切换 -->
      <view class="mb-8 flex rounded-xl bg-gray-100 p-1">
        <view
          class="flex-1 rounded-lg py-3 text-center transition-all duration-300"
          :class="loginType === LoginType.WECHAT ? 'bg-white text-blue-500 shadow-sm' : 'text-gray-500'"
          @click="loginType = LoginType.WECHAT"
        >
          <text class="text-sm font-medium">{{ $t('login.wechat_login') }}</text>
        </view>
        <view
          class="flex-1 rounded-lg py-3 text-center transition-all duration-300"
          :class="loginType === LoginType.ACCOUNT ? 'bg-white text-blue-500 shadow-sm' : 'text-gray-500'"
          @click="loginType = LoginType.ACCOUNT"
        >
          <text class="text-sm font-medium">{{ $t('login.account_login') }}</text>
        </view>
        <view
          class="flex-1 rounded-lg py-3 text-center transition-all duration-300"
          :class="loginType === LoginType.PHONE ? 'bg-white text-blue-500 shadow-sm' : 'text-gray-500'"
          @click="loginType = LoginType.PHONE"
        >
          <text class="text-sm font-medium">{{ $t('login.phone_login') }}</text>
        </view>
      </view>

      <!-- 微信登录组件 -->
      <WechatLogin
        v-if="loginType === LoginType.WECHAT"
        v-model:agree-terms="agreeTerms"
        :redirect-url="redirectUrl"
      />

      <!-- 账号密码登录组件 -->
      <AccountLogin
        v-if="loginType === LoginType.ACCOUNT"
        :redirect-url="redirectUrl"
      />

      <!-- 手机号登录组件 -->
      <PhoneLogin
        v-if="loginType === LoginType.PHONE"
        :redirect-url="redirectUrl"
      />

      <!-- 第三方登录组件 -->
      <view class="mt-8 border-t border-gray-100 pt-6">
        <text class="mb-4 block text-center text-xs text-gray-400">{{ $t('login.other_login_methods') }}</text>
        <ThirdPartyLogin :redirect-url="redirectUrl" />
      </view>
    </view>

    <!-- Toast Agent -->
    <sar-toast-agent />
  </view>
</template>

<style lang="scss" scoped>
//
</style>
